<template>
  <div ref="wrapper_hook" class="wrapper"/>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'park-Bar',
  props: {
    seriesName: {
      type: String,
      default: '订单'
    },
    source: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    source(newValue) {
      this._initECharts(newValue)
    }
  },
  mounted() {
    this._initECharts(this.source)
    window.addEventListener('resize', this.resize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.resize)
    })
  },
  destroyed() {
    this.chart.dispose()
  },
  methods: {
    _initECharts(data) {
      this.chart ? this.update(data) : this.draw(data)
    },
    resize(delay = 400) {
      setTimeout(() => {
        this.chart && this.chart.resize()
      }, delay)
    },

    getName(data) {
      return data.map(item => item.seats)
    },
    getSeries(data) {
      let alUseCar = []
      let residueCar = []
      let residueTask = []
      let alSendTask = []
      data.forEach(item => {
        alUseCar.push(item.alUseCar)
        residueCar.push(item.residueCar)
        residueTask.push(item.residueTask)
        alSendTask.push(item.alSendTask)
      })
      return {
        alUseCar, residueCar, residueTask, alSendTask
      }
    },
    draw(data) {
      const xAxisData = this.getName(data)
      const { alUseCar, residueCar, residueTask, alSendTask} = this.getSeries(data)
      this.chart = echarts.init(this.$refs.wrapper_hook)

      const options = {
        toolbox: {
          show: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {
        //   data: ['剩余', '已用', '总任务', '已派任务']
        // },
        grid: {
          top: 26,
          left: 40,
          right: 0,
          bottom: 20
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontsize: 14
          },
          scale:true,
          splitNumber:6,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#575656'
            }
          },
          axisTick: {
            show: false
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLabel: {
            fontsize: 14,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#575656'
            }
          }
        },
        series: [
          {
            name: '已用车辆',
            type: 'bar',
            stack: '广告',
            emphasis: {
              focus: 'series'
            },
            data: alUseCar,
            itemStyle: {
              color: function (params) {
                return '#28DC32FF'
              }
            }
          },
          {
            name: '剩余车辆',
            type: 'bar',
            stack: '广告',
            emphasis: {
              focus: 'series'
            },
            data: residueCar,
            itemStyle: {
              color: () => {
                return 'rgba(40,220,50,0.4)'
              }
            },
            label: {
              normal: {
                show: true,
                formatter: params => {
                  return `${alUseCar[params.dataIndex]}/${residueCar[params.dataIndex]}`
                },
                position: "top",
                textStyle: {
                  fontSize: 13,
                  color: "#787878",
                }
              }
            }
          },
          {
            name: '已派任务',
            type: 'bar',
            stack: '搜索引擎',
            emphasis: {
              focus: 'series'
            },
            data: alSendTask,
            itemStyle: {
              color: () => {
                return '#F9C14EFF'
              }
            }
          },
          {
            name: '剩余任务',
            type: 'bar',
            stack: '搜索引擎',
            emphasis: {
              focus: 'series'
            },
            data: residueTask,
            label: {
              normal: {
                show: true,
                formatter: params => {
                  return `${alSendTask[params.dataIndex]}/${residueTask[params.dataIndex]}`
                },
                position: "top",
                textStyle: {
                  fontSize: 13,
                  color: "#787878",
                }
              }
            },
            itemStyle: {
              color: () => {
                return 'rgba(249,193,78,0.4)'
              }
            }
          },
        ]
      }
      this.chart.setOption(options)
      this.chart.on('click', params => {
        this.$emit('change', params)
      })
    },
    async update(data) {
      if (!this.chart) return
      const options = this.chart.getOption()

      const xAxisData = this.getName(data)
      const { alUseCar, residueCar, residueTask, alSendTask} = this.getSeries(data)
      options.xAxis[0].data = xAxisData

      options.series[0].data =  alUseCar
      options.series[1].data = residueCar
      options.series[1].label.formatter = params => {
        return `${alUseCar[params.dataIndex]}/${residueCar[params.dataIndex]}`
      }

      options.series[2].data = alSendTask
      options.series[3].data = residueTask
      options.series[3].label.formatter = params => {
        return `${alSendTask[params.dataIndex]}/${residueTask[params.dataIndex]}`

      }
      await this.$nextTick()
      this.chart.setOption(options, true)
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 190px;
}
</style>
